<template>
  <div class="message-container">
    <!-- 页面头部 -->
    <div class="message-header">
      <div class="header-content">
        <div class="header-title">
          <i class="el-icon-message" />
          <h2>系统通知管理</h2>
        </div>
        <p class="header-description">发送系统通知消息给用户，支持文本和附件</p>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="message-main">
      <el-card class="form-card" shadow="hover">
        <div slot="header" class="card-header">
          <div class="card-title">
            <i class="el-icon-edit-outline" />
            <span>发送系统通知</span>
          </div>
        </div>

        <el-form
          ref="messageForm"
          :model="messageForm"
          :rules="messageRules"
          label-width="100px"
          label-position="top"
        >
          <el-form-item label="通知标题" prop="title">
            <el-input
              v-model="messageForm.title"
              placeholder="请输入通知标题"
              maxlength="200"
              show-word-limit
              clearable
            />
          </el-form-item>

          <el-form-item label="通知内容" prop="content">
            <el-input
              v-model="messageForm.content"
              type="textarea"
              :rows="8"
              placeholder="请输入通知内容"
              maxlength="2000"
              show-word-limit
            />
          </el-form-item>

          <el-form-item label="附件（可选）">
            <el-upload
              ref="upload"
              class="upload-zone"
              action=""
              :auto-upload="false"
              :on-change="handleFileChange"
              :on-remove="handleFileRemove"
              :file-list="fileList"
              :limit="1"
              accept="*/*"
              drag
            >
              <div class="upload-content">
                <i class="el-icon-upload upload-icon" />
                <div class="upload-text">
                  将文件拖到此处，或<em>点击上传</em>
                </div>
                <div class="upload-tip">
                  支持任意格式文件，单个文件不超过50MB
                </div>
              </div>
            </el-upload>
            <div v-if="fileList.length > 0" class="file-info">
              <el-tag type="info" size="small">
                <i class="el-icon-document" />
                {{ fileList[0].name }} ({{ formatFileSize(fileList[0].size) }})
              </el-tag>
            </div>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              size="medium"
              :loading="submitting"
              icon="el-icon-message"
              @click="handleSubmit"
            >
              发送通知
            </el-button>
            <el-button
              size="medium"
              icon="el-icon-refresh-left"
              @click="handleReset"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 已发送消息列表 -->
      <el-card class="list-card" shadow="hover">
        <div slot="header" class="card-header">
          <div class="card-title">
            <i class="el-icon-document" />
            <span>已发送消息</span>
          </div>
          <el-button
            type="text"
            size="small"
            icon="el-icon-refresh"
            :loading="listLoading"
            @click="loadMessageList"
          >
            刷新
          </el-button>
        </div>

        <div v-loading="listLoading" class="message-list">
          <div v-if="messageList.length === 0 && !listLoading" class="empty-list">
            <i class="el-icon-document-delete" />
            <p>暂无已发送的消息</p>
          </div>
          <div v-else class="list-content">
            <div
              v-for="item in messageList"
              :key="item.messageId"
              class="message-item"
            >
              <div class="message-header-item">
                <div class="message-title-row">
                  <h4 class="message-title">{{ item.title || '无标题' }}</h4>
                  <span class="message-time">{{ formatTime(item.createTime) }}</span>
                </div>
                <div class="message-sender">
                  <i class="el-icon-user" />
                  <span>发送者：{{ item.senderId || '系统' }}</span>
                </div>
              </div>
              <div class="message-content-item">
                <p class="message-text">{{ item.streamlineContent || '无内容' }}</p>
                <div class="message-footer">
                  <div v-if="item.file || item.imageUrl" class="message-attachments">
                    <el-tag v-if="item.file" type="info" size="small">
                      <i class="el-icon-document" />
                      附件
                    </el-tag>
                    <el-tag v-if="item.imageUrl" type="success" size="small">
                      <i class="el-icon-picture" />
                      图片
                    </el-tag>
                  </div>
                  <el-button
                    type="text"
                    size="small"
                    icon="el-icon-view"
                    @click="handleViewDetail(item.messageId)"
                  >
                    查看详情
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 分页 -->
        <div v-if="messageList.length > 0 || pagination.total > 0" class="pagination-wrapper">
          <!-- 页码导航和跳转 -->
          <div class="pagination-row pagination-row-second">
            <el-button
              :disabled="pagination.page <= 1"
              size="small"
              icon="el-icon-arrow-left"
              class="pagination-btn"
              @click="handlePageChange(pagination.page - 1)"
            />
            
            <!-- 当前页码显示 -->
            <span class="pagination-current-page">{{ pagination.page }}</span>
            
            <el-button
              :disabled="pagination.page >= totalPages"
              size="small"
              icon="el-icon-arrow-right"
              class="pagination-btn"
              @click="handlePageChange(pagination.page + 1)"
            />
            
            <!-- 跳转输入框 - 与页码在同一行 -->
            <span class="jump-label">前往</span>
            <el-input
              v-model.number="jumpPage"
              size="small"
              class="jump-input"
              @keyup.enter.native="handleJumpPage"
            />
            <span class="jump-label">页</span>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 消息详情对话框 -->
    <el-dialog
      title="系统通知详情"
      :visible.sync="detailDialogVisible"
      width="800px"
      :close-on-click-modal="false"
      class="message-detail-dialog"
    >
      <div v-loading="detailLoading" class="detail-content">
        <div v-if="messageDetail" class="detail-wrapper">
          <!-- 标题 -->
          <div class="detail-section">
            <div class="detail-label">通知标题</div>
            <div class="detail-value detail-title">{{ messageDetail.title || '无标题' }}</div>
          </div>

          <!-- 发送信息 -->
          <div class="detail-section">
            <div class="detail-label">发送信息</div>
            <div class="detail-value detail-info">
              <div class="info-item">
                <span class="info-label">发送者：</span>
                <span>{{ messageDetail.senderId || '系统' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">发送时间：</span>
                <span>{{ formatTime(messageDetail.createTime) }}</span>
              </div>
              <div v-if="messageDetail.updateTime && messageDetail.updateTime !== messageDetail.createTime" class="info-item">
                <span class="info-label">更新时间：</span>
                <span>{{ formatTime(messageDetail.updateTime) }}</span>
              </div>
            </div>
          </div>

          <!-- 内容 -->
          <div class="detail-section">
            <div class="detail-label">通知内容</div>
            <div class="detail-value detail-content-text">
              <pre class="content-pre">{{ messageDetail.content || '无内容' }}</pre>
            </div>
          </div>

          <!-- 图片 -->
          <div v-if="messageDetail.imageUrl" class="detail-section">
            <div class="detail-label">图片附件</div>
            <div class="detail-value">
              <el-image
                :src="messageDetail.imageUrl"
                fit="contain"
                :preview-src-list="[messageDetail.imageUrl]"
                class="detail-image"
              />
            </div>
          </div>

          <!-- 文件附件 -->
          <div v-if="messageDetail.file" class="detail-section">
            <div class="detail-label">文件附件</div>
            <div class="detail-value">
              <el-tag type="info" size="medium">
                <i class="el-icon-document" />
                {{ messageDetail.file }}
              </el-tag>
            </div>
          </div>
        </div>
        <div v-else-if="!detailLoading" class="detail-empty">
          <i class="el-icon-warning" />
          <p>未找到消息详情</p>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { sendSystemMessage, getSystemMessagePage, getSystemMessageDetail } from '@/api/message'
import { Message } from 'element-ui'

export default {
  name: 'SystemMessage',
  data() {
    return {
      submitting: false,
      messageForm: {
        title: '',
        content: '',
        file: null
      },
      messageRules: {
        title: [
          { required: true, message: '请输入通知标题', trigger: 'blur' },
          { min: 2, max: 200, message: '标题长度在 2 到 200 个字符', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入通知内容', trigger: 'blur' },
          { min: 5, max: 2000, message: '内容长度在 5 到 2000 个字符', trigger: 'blur' }
        ]
      },
      fileList: [],
      // 消息列表相关
      listLoading: false,
      messageList: [],
      pagination: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      jumpPage: 1, // 跳转页码输入
      // 详情对话框相关
      detailDialogVisible: false,
      detailLoading: false,
      messageDetail: null
    }
  },
  computed: {
    // 计算总页数
    totalPages() {
      return Math.ceil(this.pagination.total / this.pagination.pageSize) || 1
    }
  },
  created() {
    this.loadMessageList()
  },
  methods: {
    // 文件选择变化
    handleFileChange(file, fileList) {
      // 限制文件大小 50MB
      const maxSize = 50 * 1024 * 1024
      if (file.size > maxSize) {
        Message.error('文件大小不能超过50MB')
        this.$refs.upload.clearFiles()
        this.fileList = []
        return false
      }
      this.messageForm.file = file.raw
      this.fileList = fileList
    },

    // 移除文件
    handleFileRemove() {
      this.messageForm.file = null
      this.fileList = []
    },

    // 格式化文件大小
    formatFileSize(size) {
      if (!size) return '0 B'
      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(size) / Math.log(k))
      return Math.round(size / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
    },

    // 提交表单
    async handleSubmit() {
      try {
        await this.$refs.messageForm.validate()
        
        this.submitting = true
        
        // 构建表单数据，如果没有文件则不包含 file 字段
        const formData = {
          title: this.messageForm.title,
          content: this.messageForm.content
        }
        
        // 只有当文件存在时才添加 file 字段
        if (this.messageForm.file) {
          formData.file = this.messageForm.file
        }

        const response = await sendSystemMessage(formData)
        
        if (response.code === 1) {
          Message.success(response.msg || '系统通知发送成功')
          this.handleReset()
          // 刷新消息列表
          this.loadMessageList()
        } else {
          Message.error(response.msg || '发送失败，请重试')
        }
      } catch (error) {
        console.error('发送系统通知失败:', error)
        if (error.message !== 'validation') {
          Message.error('发送失败，请重试')
        }
      } finally {
        this.submitting = false
      }
    },

    // 重置表单
    handleReset() {
      this.$refs.messageForm.resetFields()
      this.$refs.upload.clearFiles()
      this.fileList = []
      this.messageForm.file = null
    },

    // 加载消息列表
    async loadMessageList() {
      this.listLoading = true
      try {
        const response = await getSystemMessagePage({
          page: this.pagination.page,
          pageSize: this.pagination.pageSize
        })
        if (response.code === 1) {
          const list = response.data || []
          this.messageList = list
          
          // 尝试从多个可能的路径获取总数
          const totalFromMap = response?.map && (response.map.total ?? response.map.count ?? response.map.totalCount)
          const totalFromData = response?.data && (typeof response.data === 'object' && !Array.isArray(response.data) 
            ? (response.data.total ?? response.data.count ?? response.data.totalCount) 
            : undefined)
          const totalFromRoot = typeof response?.total === 'number' ? response.total : undefined
          
          const totalCandidate = totalFromMap ?? totalFromData ?? totalFromRoot
          
          if (typeof totalCandidate === 'number' && totalCandidate > 0) {
            this.pagination.total = totalCandidate
          } else {
            // 如果没有返回总数，使用乐观策略估算
            // 如果返回的数据量等于每页大小，认为可能还有下一页
            const hasNextLikely = list.length >= this.pagination.pageSize
            if (hasNextLikely) {
              // 满页：认为至少还有下一页，设置一个较大的总数以便可以点击下一页
              // 设置一个合理的最小总数，确保分页组件能显示多个页码
              const minTotal = (this.pagination.page + 2) * this.pagination.pageSize
              this.pagination.total = Math.max(minTotal, this.pagination.page * this.pagination.pageSize + this.pagination.pageSize)
            } else {
              // 非满页：认为已到最后一页
              this.pagination.total = (this.pagination.page - 1) * this.pagination.pageSize + list.length
              // 确保总数至少等于当前已显示的数据
              if (this.pagination.total === 0 && list.length > 0) {
                this.pagination.total = list.length
              }
            }
          }
          
          // 确保 total 不为 0（如果有数据的话）
          if (this.pagination.total === 0 && list.length > 0) {
            this.pagination.total = list.length
          }
        } else {
          Message.error(response.msg || '加载消息列表失败')
          this.messageList = []
          this.pagination.total = 0
        }
      } catch (error) {
        console.error('加载消息列表失败:', error)
        Message.error('加载消息列表失败')
        this.messageList = []
        this.pagination.total = 0
      } finally {
        this.listLoading = false
      }
    },

    // 分页大小改变
    handleSizeChange(val) {
      // 当每页条数改变时，重置到第一页
      this.pagination.pageSize = val
      this.pagination.page = 1
      this.jumpPage = 1
      this.loadMessageList()
    },

    // 页码改变
    handlePageChange(val) {
      this.pagination.page = val
      this.jumpPage = val // 同步更新跳转输入框
      this.loadMessageList()
    },

    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return ''
      return timeStr
    },
    
    
    // 跳转到指定页码
    handleJumpPage() {
      const page = Number(this.jumpPage)
      if (page >= 1 && page <= this.totalPages) {
        this.handlePageChange(page)
      } else {
        Message.warning(`请输入 1 到 ${this.totalPages} 之间的页码`)
        this.jumpPage = this.pagination.page
      }
    },

    // 查看消息详情
    async handleViewDetail(messageId) {
      if (!messageId) {
        Message.warning('消息ID不存在')
        return
      }

      this.detailDialogVisible = true
      this.detailLoading = true
      this.messageDetail = null

      try {
        const response = await getSystemMessageDetail({ messageId })
        if (response.code === 1) {
          this.messageDetail = response.data || null
        } else {
          Message.error(response.msg || '获取消息详情失败')
          this.detailDialogVisible = false
        }
      } catch (error) {
        console.error('获取消息详情失败:', error)
        Message.error('获取消息详情失败，请重试')
        this.detailDialogVisible = false
      } finally {
        this.detailLoading = false
      }
    }
  },
  watch: {
    // 监听当前页码变化，同步跳转输入框
    'pagination.page'(newVal) {
      this.jumpPage = newVal
    }
  }
}
</script>

<style lang="scss" scoped>
.message-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;

  @media (max-width: 768px) {
    padding: 10px;
  }
}

.message-header {
  margin-bottom: 24px;

  .header-content {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);

    .header-title {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      i {
        font-size: 24px;
        color: #409eff;
        margin-right: 12px;
      }

      h2 {
        margin: 0;
        font-size: 24px;
        font-weight: 600;
        color: #303133;
        letter-spacing: 0.5px;
      }
    }

    .header-description {
      margin: 0;
      color: #606266;
      font-size: 14px;
      line-height: 1.6;
    }
  }
}

.message-main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;

  @media (max-width: 1200px) {
    grid-template-columns: 1fr;
  }
  
  // 确保卡片内容不会溢出
  .list-card {
    ::v-deep .el-card__body {
      overflow-x: auto;
      min-width: 0; // 允许收缩
    }
  }
}

.form-card,
.list-card {
  border-radius: 12px;
  border: none;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  }

  ::v-deep .el-card__header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px 12px 0 0;
    padding: 16px 20px;
    border: none;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .card-title {
        display: flex;
        align-items: center;

        i {
          font-size: 18px;
          margin-right: 8px;
        }

        span {
          font-size: 16px;
          font-weight: 600;
        }
      }

      .el-button--text {
        color: white;
        padding: 0;

        &:hover {
          background-color: rgba(255, 255, 255, 0.1);
        }
      }
    }
  }

  ::v-deep .el-card__body {
    padding: 24px;
  }
}

// 表单样式
::v-deep .el-form {
  .el-form-item__label {
    font-weight: 500;
    color: #303133;
    padding-bottom: 8px;
  }

  .el-input__inner,
  .el-textarea__inner {
    border-radius: 6px;
    transition: all 0.3s;

    &:focus {
      border-color: #409eff;
      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
    }
  }
}

// 上传区域样式
.upload-zone {
  width: 100%;

  ::v-deep .el-upload-dragger {
    width: 100%;
    border: 2px dashed #d9d9d9;
    border-radius: 8px;
    background: #fafafa;
    transition: all 0.3s ease;
    padding: 20px;

    &:hover {
      border-color: #409eff;
      background: #f0f9ff;
    }

    .upload-content {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .upload-icon {
        font-size: 48px;
        color: #c0c4cc;
        margin-bottom: 16px;
        transition: all 0.3s ease;
      }

      .upload-text {
        font-size: 16px;
        color: #606266;
        margin-bottom: 8px;
        line-height: 1.5;

        em {
          color: #409eff;
          font-style: normal;
          font-weight: 500;
        }
      }

      .upload-tip {
        font-size: 12px;
        color: #909399;
        line-height: 1.4;
      }
    }

    &:hover .upload-content .upload-icon {
      color: #409eff;
      transform: scale(1.1);
    }
  }
}

.file-info {
  margin-top: 12px;

  .el-tag {
    padding: 8px 12px;
    font-size: 13px;

    i {
      margin-right: 6px;
    }
  }
}

// 消息列表样式
.message-list {
  min-height: 400px;
  max-height: 600px;
  overflow-y: auto;

  .empty-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    text-align: center;
    color: #909399;

    i {
      font-size: 64px;
      margin-bottom: 16px;
      color: #c0c4cc;
    }

    p {
      margin: 0;
      font-size: 14px;
    }
  }

  .list-content {
    .message-item {
      background: #f8f9fa;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 12px;
      border-left: 3px solid #409eff;
      transition: all 0.3s ease;

      &:hover {
        background: #f0f9ff;
        transform: translateX(4px);
        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
      }

      &:last-child {
        margin-bottom: 0;
      }

      .message-header-item {
        margin-bottom: 12px;

        .message-title-row {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 8px;

          .message-title {
            margin: 0;
            font-size: 16px;
            font-weight: 600;
            color: #303133;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-right: 12px;
          }

          .message-time {
            font-size: 12px;
            color: #909399;
            white-space: nowrap;
          }
        }

        .message-sender {
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #606266;

          i {
            margin-right: 4px;
            color: #909399;
          }
        }
      }

      .message-content-item {
        .message-text {
          margin: 0 0 8px 0;
          color: #606266;
          font-size: 14px;
          line-height: 1.6;
          word-break: break-word;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .message-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 12px;
          padding-top: 12px;
          border-top: 1px solid #e4e7ed;

          .message-attachments {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;

            .el-tag {
              font-size: 12px;
              padding: 4px 8px;

              i {
                margin-right: 4px;
              }
            }
          }

          .el-button {
            color: #409eff;
            font-size: 13px;

            &:hover {
              color: #66b1ff;
            }
          }
        }
      }
    }
  }
}

// 分页样式 - 重新设计
.pagination-wrapper {
  margin-top: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
  border-top: 1px solid #e4e7ed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;

  // 页码导航和跳转 - 同一行
  .pagination-row-second {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap; // 不换行，确保在同一行
    
    .pagination-btn {
      border-radius: 4px;
      min-width: 32px;
      padding: 8px 12px;
      transition: all 0.3s ease;
      flex-shrink: 0;
      
      &:hover:not(.is-disabled) {
        background-color: #f0f9ff;
        color: #409eff;
        border-color: #409eff;
      }
      
      &.is-disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }
    }
    
    // 当前页码显示
    .pagination-current-page {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 32px;
      height: 32px;
      background-color: #409eff;
      color: white;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 600;
      padding: 0 12px;
      margin: 0 4px;
      box-shadow: 0 2px 4px rgba(64, 158, 255, 0.2);
    }
    
    // 跳转输入框 - 与页码在同一行
    .jump-label {
      color: #606266;
      font-size: 14px;
      white-space: nowrap;
      flex-shrink: 0;
      margin-left: 16px;
      
      &:first-of-type {
        margin-left: 0;
      }
    }
    
    .jump-input {
      width: 60px;
      flex-shrink: 0;
      
      ::v-deep .el-input__inner {
        border-radius: 4px;
        text-align: center;
        transition: all 0.3s;
        
        &:hover {
          border-color: #409eff;
        }
        
        &:focus {
          border-color: #409eff;
          box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .message-header .header-content {
    padding: 16px;

    .header-title h2 {
      font-size: 20px;
    }
  }

  .message-main {
    gap: 16px;
  }

  .form-card,
  .list-card {
    ::v-deep .el-card__body {
      padding: 16px;
    }
  }

  .upload-zone {
    ::v-deep .el-upload-dragger {
      padding: 16px;

      .upload-content {
        .upload-icon {
          font-size: 36px;
          margin-bottom: 12px;
        }

        .upload-text {
          font-size: 14px;
        }

        .upload-tip {
          font-size: 11px;
        }
      }
    }
  }
}

// 动画效果
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-card {
  animation: fadeInUp 0.6s ease-out;
}

.list-card {
  animation: fadeInUp 0.6s ease-out;
  animation-delay: 0.2s;
}

// 详情对话框样式
::v-deep .message-detail-dialog {
  .el-dialog__header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px 24px;
    border-radius: 4px 4px 0 0;

    .el-dialog__title {
      color: white;
      font-size: 18px;
      font-weight: 600;
    }

    .el-dialog__close {
      color: white;
      font-size: 20px;

      &:hover {
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }

  .el-dialog__body {
    padding: 24px;
    max-height: 70vh;
    overflow-y: auto;
  }

  .detail-content {
    min-height: 200px;

    .detail-wrapper {
      .detail-section {
        margin-bottom: 24px;

        &:last-child {
          margin-bottom: 0;
        }

        .detail-label {
          font-size: 14px;
          font-weight: 600;
          color: #303133;
          margin-bottom: 8px;
          padding-bottom: 6px;
          border-bottom: 2px solid #e4e7ed;
        }

        .detail-value {
          font-size: 14px;
          color: #606266;
          line-height: 1.8;

          &.detail-title {
            font-size: 18px;
            font-weight: 600;
            color: #303133;
            padding: 12px;
            background: #f5f7fa;
            border-radius: 6px;
            border-left: 4px solid #409eff;
          }

          &.detail-info {
            .info-item {
              margin-bottom: 8px;

              &:last-child {
                margin-bottom: 0;
              }

              .info-label {
                font-weight: 500;
                color: #606266;
                margin-right: 8px;
              }
            }
          }

          &.detail-content-text {
            padding: 16px;
            background: #f8f9fa;
            border-radius: 6px;
            border: 1px solid #e4e7ed;

            .content-pre {
              margin: 0;
              white-space: pre-wrap;
              word-wrap: break-word;
              font-family: inherit;
              font-size: 14px;
              line-height: 1.8;
              color: #606266;
            }
          }
        }
      }

      .detail-image {
        max-width: 100%;
        max-height: 400px;
        border-radius: 6px;
        border: 1px solid #e4e7ed;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
      }
    }

    .detail-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 200px;
      text-align: center;
      color: #909399;

      i {
        font-size: 48px;
        margin-bottom: 16px;
        color: #c0c4cc;
      }

      p {
        margin: 0;
        font-size: 14px;
      }
    }
  }

  .dialog-footer {
    text-align: right;
    padding-top: 16px;
    border-top: 1px solid #e4e7ed;
  }
}

// 响应式设计 - 详情对话框
@media (max-width: 768px) {
  ::v-deep .message-detail-dialog {
    .el-dialog {
      width: 95% !important;
      margin: 5vh auto 0;
    }

    .el-dialog__body {
      padding: 16px;
      max-height: 60vh;
    }

    .detail-content {
      .detail-wrapper {
        .detail-section {
          margin-bottom: 16px;

          .detail-value {
            &.detail-title {
              font-size: 16px;
            }

            &.detail-content-text {
              padding: 12px;
            }
          }
        }

        .detail-image {
          max-height: 250px;
        }
      }
    }
  }
}
</style>



